<template>
	<cxView display="inline-flex" alignItems="center" :position="position" :zIndex="zIndex" :top="top" :right="right"
		:bottom="bottom" :left="left" :marginTop="marginTop" :marginLeft="marginLeft" :marginBottom="marginBottom"
		:marginRight="marginRight" :margin="margin">

		<u-checkbox v-model="model" :disabled="disabled" :size="size" :label-size="lableSize" :icon-size="iconSize"
			:name="name" :shape="shape" :label-disabled="labelDisabled" :active-color="activeColor" @change="changed"
			class="u-checkbox__label">
			<cxText :color="textColor">{{name}}</cxText>
		</u-checkbox>

		<!-- :color="labelColor" -->
	</cxView>

</template>

<script>
	/**
	 * 选中状态
	 * @property {Boolean} checked 选中状态 双向绑定某一个checkbox的值，如果将该变量设置为true，将会被选中
	 * @property {String} size  组件整体的大小，单位rpx
	 * @property {Boolean} disabled 是否允许点击
	 * @property {String} name 显示的名字
	 * @property {Boolean} labelDisabled 是否禁止点击文本操作checkbox 默认为false
	 *  @property {String} lableSize label字体大小，单位rpx
	 * 
	 * @property {String} iconSize  图标大小
	 * @property {String} shape  circle/square,默认为circle
	 * @property {String} activeColor  选中时的颜色，如设置CheckboxGroup的active-color将失
	 * @property {Boolean} showLabelActiveColor 是否让label在选中时,同样也显示ActiveColor

	 * 
	 */
	export default {
		name: "cxCheckBox",
		data() {
			return {

				textColor: '#333',
				model: false

			};
		},
		watch: {
			value: {
				handler(val) {
					this.model = val;
				},
				immediate: true
			},
			model(val) {
				this.$emit("input", val)
			}
		},
		methods: {
			changed(e) {
				this.model = !this.model;
				if (this.showLabelActiveColor && this.model === true) {
					this.textColor = this.activeColor;

				} else {
					this.textColor = "#333";
				}
				this.$emit('confirm', this.model);
			}
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			/**
			 * 背景view属性
			 */
			position: {
				type: String,
				default: ''
			},
			zIndex: {
				type: Number,
				default: 0
			},
			top: {
				type: [String, Number],
				default: ''
			},
			right: {
				type: [String, Number],
				default: ''
			},
			bottom: {
				type: [String, Number],
				default: ''
			},
			left: {
				type: [String, Number],
				default: ''
			},
			margin: {
				type: String,
				default: ''
			},
			marginTop: {
				type: [String, Number],
				default: ''
			},
			marginLeft: {
				type: [String, Number],
				default: ''
			},
			marginBottom: {
				type: [String, Number],
				default: ''
			},
			marginRight: {
				type: [String, Number],
				default: ''
			},

			/**
			 * checkBox属性
			 */
			/**
			 * 选中状态
			 * 双向绑定某一个checkbox的值，如果将该变量设置为true，将会被选中
			 */
			checked: {
				type: Boolean,
				default: false
			},
			/**
			 * 组件整体的大小，单位rpx
			 */
			size: {
				type: String,
				default: ''
			},
			/**
			 * 
			 */
			disabled: {
				type: Boolean,
				default: false
			},
			/**
			 * label字体大小，单位rpx
			 */
			lableSize: {
				type: String,
				default: ''
			},
			/**
			 * 
			 */
			iconSize: {
				type: String,
				default: ''
			},
			/**
			 * 
			 */
			name: {
				type: String,
				default: ''
			},
			/**
			 * circle,
			 * square
			 */
			shape: {
				type: String,
				default: 'circle'
			},
			/**
			 * 是否禁止点击文本操作checkbox
			 */
			labelDisabled: {
				type: Boolean,
				default: false
			},
			/**
			 * 选中时的颜色，如设置CheckboxGroup的active-color将失
			 */
			activeColor: {
				type: String,
				default: ''
			},
			/**
			 * 是否让label在选中时,同样也显示ActiveColor
			 */
			showLabelActiveColor: {
				type: Boolean,
				default: false
			},
		}

	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP-WEIXIN */
	/deep/ .u-checkbox__label {
		margin-right: -24rpx !important;
	}

	/* #endif */
	/* #ifndef MP-WEIXIN */
	/deep/ .u-checkbox__label {
		margin-right: 0rpx !important;
	}

	/* #endif */
</style>